<template>
	<view style="margin: 27rpx; background-color: #f7f7f7;">  
		<view class="com">
			<view class="name">退款商品</view>
			<view class="dingdan">
				<view class="diaodian">
					<view class="diaoyu">
						<view class="le">
							<image src="../../static/logo.png" mode="widthFix"></image>
						</view>
						<view class="rig">
							<view class="jlb">钓鱼岛二哥垂钓俱乐部</view>
							<view class="lei">
								<view class="ly">路亚</view>
								<view class="td">台钓</view>
								<view class="kzs" style="background-color: #F67A4F; width: 87rpx;">可住宿</view>
							</view>
							<view class="jl">
								<image style="margin-top: 5rpx;" src="../../static/dingwei01.png" mode=""></image>
								<span style="margin-left: 12rpx;">四川省成都市双流区安中路100米</span>
							</view>
						
							<view class="sf" style="text-align: right;">
								收费：150/天
							</view>
						</view>
						
					</view>

					
					</view>
					
			</view>
			
		</view>
		
		<view class="select">
			<view class="name">退款选择</view>
			<view class="uni-list">
				<radio-group @change="radioChange">
					<label class="uni-list-cell" v-for="(item, index) in items" :key="item.value">
						<view>{{item.name}}</view>
						<view >
							
						</view>
						<view class="num">
							<button @click.stop="reduce" v-if="item.name=='仅退打窝'">-</button>
							<input type="text" v-model="number" v-if="item.name=='仅退打窝'"></input>
							<button @click.stop="add" style="margin-right: 20rpx;" v-if="item.name=='仅退打窝'">+</button>
							<radio :value="item.value" :checked="index === current" />
						</view>
						
					</label>
				</radio-group>
				<view class="all">
					<span>共计退款</span>
					<span style="color: #EF1B1B; font-weight: bold;">￥{{money}}</span>
				</view>
			</view>
		</view>
		
		<view class="explain">
			<view class="name">补充描述</view>
			<view class="miaos">
				<textarea name="" id="" cols="30" rows="10" placeholder="请输入补充描述内容..."></textarea>
				<image src="../../static/shangchuan.png" mode=""></image>
			</view>
		</view>
		<button class="btn">提交</button>
		<view class="" style="height: 10rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 items: [{
						value: 'USA',
						name: '全部退款',
					},
					{
						value: 'CHN',
						name: '仅退门票'
					},
					{
						value: 'BRA',
						name: '仅退打窝'
					},
				],
				current: 0,
				number:1,
			};
		},
		computed:{
			money(){
				return this.number * 200 +100
			}
		},
		methods:{
			 radioChange: function(evt) {
			            for (let i = 0; i < this.items.length; i++) {
			                if (this.items[i].value === evt.detail.value) {
			                    this.current = i;
			                    break;
			                }
			            }
			        },
			add(){
				let that = this
				that.number = that.number+1
				console.log("++++")
			},
			reduce(){
				if(this.number==1){
					uni.showToast({
						title:'亲已经是最少了~',
						icon:'none',
						duration:1000
					})
				}else{
					this.number--
				}
				
			}
		},
	}
</script>

<style lang="scss">
	.com{
		// width: 697rpx;
		// height: 280rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		padding: 21rpx;
	}
	// 11
	.dingdan{
		// margin: 27rpx;
		background-color: #f7f7f7;
		
		
	}
	.diaodian{
		background-color: #fff;
		margin: 20rpx 0;
		border-radius: 20rpx;
		padding-bottom: 20rpx;
	}
	.diaoyu{
		display: flex;
		// justify-content: space-between;
		
	}
	.le{
		// margin: 36rpx 0rpx;
		image{
			width: 200rpx;
			// height: 200rpx;
		}
	}
	.rig{
		margin: 20rpx ;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
	}
	.jlb{
		font-weight: bold;
		font-size: 29rpx;
		color: #333333;
	}
	.lei{
		display: flex;
		margin-top: 27rpx;
		>view{
			margin-right: 16rpx;
			width: 67rpx;
			height: 30rpx;
			background: #E0EEFF;
			border-radius: 4rpx;
			// width: 67rpx;
			// height: 30rpx;
			text-align: center;
			line-height: 30rpx;
		}
	}
	.jl{
		margin: 25rpx 0;
		
		image{
			width: 18rpx;
			height: 23rpx;
		}
	}
	.sf{
		font-weight: bold;
		font-size: 27rpx;
		color: #F01B1B;
		margin-top: 27rpx;
	}
	// 
	.select{
		margin: 20rpx 0;
		background-color: #fff;
		padding: 29rpx 21rpx;
	}
	.uni-list-cell{
		display: flex;
		justify-content: space-between;
		margin: 40rpx 0;
		
		font-weight: 500;
		font-size: 24rpx;
		color: #333333;
	}
	.num{
		display: flex;
		>button{
			width: 60rpx;
			height: 60rpx;
			border-radius: 7rpx 0rpx 0rpx 7rpx;
			border: 1px solid #E6E6E6;
			// text-align: center;
			line-height: 47rpx;
			// padding-right: 10rpx;
			padding: 0;
		}
		input{
			width: 47rpx;
			height: 47rpx;
			border: 1px solid #E6E6E6;
			text-align: center;
		}
	}
	.all{
		display: flex;
		justify-content: space-between;
		font-weight: 500;
		font-size: 24rpx;
		color: #333333;
	}
	.explain{
		// width: 697rpx;
		// height: 387rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		padding: 20rpx;
		margin: 20rpx 0rpx;
	}
	.miaos{
		background: #F7F7F7;
		border-radius: 7rpx;
		margin: 15rpx 0;
		textarea{
			padding: 33rpx 23rpx;
			width: 100%;
		}
		image{
			width: 120rpx;
			height: 120rpx;
			margin: 33rpx 23rpx;
		}
	}
	.btn{
		width: 697rpx;
		height: 93rpx;
		background: #368BFE;
		border-radius: 13rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		margin: 80rpx 0 30rpx;
		// margin-bottom: 100rpx;
	}
	
</style>
